<template>
	<view class="page">
		<template v-if="isLogin">
			<view class="h90">
				<view class="fix-wrap">
					<view class="h45 search-bar">
						<view class="search-form">
							<view class="icon sc-icon iconfont">&#xe61e;</view>
							<input type="text" class="sc-inp" v-model="params.keyword" placeholder="输入关键词搜索" @input="search">
							<view v-if="params.keyword" class="icon clear-btn iconfont icon-shanchu" @click="clearKeyword"></view>
						</view>
					</view>
					<view class="h45">
						<view class="filter-bar"> 
							<view class="item" @click.stop="showFilter(1)">
								<view class="name">{{filter_data.select_type_name||'项目类型'}}</view>
								<view class="iconfont f-s60">&#xeb8b;</view>
							</view>
							<view class="item" @click.stop="showFilter(2)">
								<view class="name">{{filter_data.select_status_name||'项目状态'}}</view>
								<view class="iconfont f-s60">&#xeb8b;</view>
							</view>
						</view>
						
						<!-- 筛选区域 -->
						<view v-if="filter_data.isShowFilter" class="filter-select-page" @click="hideFilter">
							<!-- 项目类型 -->
							<template v-if="filter_data.isShowProjectType">
								<view class="filter-select-list">
									<view class="item" v-for="(item,index) in filter_data.type" :key="index" @click="filterDataByType(item.protype)">
										<view class="val">{{item.name}}</view>
										<view class="icon"> 
											<view v-if="item.check" class="iconfont f-s36 active">&#xe604;</view>
										</view>
									</view>
								</view>
							</template>
							
							<!-- 项目状态 -->
							<template v-if="filter_data.isShowProjectStatus">
								<view class="filter-select-list">
									<view class="item" v-for="(item,index) in filter_data.status" :key="index" @click="filterDataByStatus(item.finish)">
										<view class="val">{{item.name}}</view>
										<view class="icon"> 
											<view v-if="item.check" class="iconfont f-s36 active">&#xe604;</view>
										</view>
									</view>
								</view>
							</template>
						</view>
					</view> 
				</view>
			</view>
			<view class="body">
				<view class="list-wrap">

					<template v-if="loadingState.default">
						<loading :loadingState="loadingState"></loading>
					</template>

					<template v-else>
						<template v-if="list.length>0"> 
							<!-- 防控 -->
							<template v-if="params.protype==1"> 
								<view class="item" v-for="(item,index) in list" :key="index" 
								:data-pid="item.id" 
								:data-proType="item.project_type" 
								:data-unionPid="item.union_pid" @click="jump($event,item.sh_status)">
									<view class="pic">
										<image v-if="item.project_type==1" src="@/static/images/fk_icon.png" mode="widthFix"></image> 
									</view>
									<view class="info">
										<view class="name">{{item.pname}}</view>
										<view class="params">
											<view class="text">创建时间：{{item.begin_time}}</view>
										</view>
									</view>
									<view v-if="item.finish==1" class="status">
										<image src="@/static/images/gq_icon.png" mode="widthFix"></image>
									</view>
									<view v-if="item.sh_status==0" class="sh-status">
										<image :src="web_host+'/wxicon/review.png'" mode="widthFix" style="width: 80rpx;"></image>
									</view>
								</view> 	 
							</template>
							
							<!-- 监测 -->
							<template v-if="params.protype==2">
								<view class="item" v-for="(item,index) in list" :key="index"
								:data-pid="item.id" 
								:data-proType="item.project_type" 
								:data-unionPid="item.union_pid" @click="jump($event,item.sh_status)">
									<view class="pic">
										<image v-if="item.project_type==2" src="@/static/images/pc_icon.png" mode="widthFix"></image> 
									</view>
									<view class="info">
										<view class="name">{{item.pname}}</view>
										<view class="params">
											<view class="text">创建时间：{{item.begin_time}}</view>
										</view>
									</view>
									<view v-if="item.finish==1" class="status">
										<image src="@/static/images/gq_icon.png" mode="widthFix"></image>
									</view>
									<view v-if="item.sh_status==0" class="sh-status">
										<image :src="web_host+'/wxicon/review.png'" mode="widthFix" style="width: 80rpx;"></image>
									</view>
								</view> 	 	 
							</template>
							
							<!-- 监理 -->
							<template v-if="params.protype==3">
								<view class="item" v-for="(item,index) in list" :key="index"
								:data-pid="item.id" 
								:data-proType="item.project_type" 
								:data-unionPid="item.union_pid" @click="jump($event,item.sh_status)">
									<view class="pic">
										<image v-if="item.project_type==3" src="@/static/images/pro_jl.png" mode="widthFix"></image> 
									</view>
									<view class="info">
										<view class="name">{{item.pname}}</view>
										<view class="params">
											<view class="text">创建时间：{{item.begin_time}}</view>
										</view>
									</view>
									<view v-if="item.finish==1" class="status">
										<image src="@/static/images/gq_icon.png" mode="widthFix"></image>
									</view>
									<view v-if="item.sh_status==0" class="sh-status">
										<image :src="web_host+'/wxicon/review.png'" mode="widthFix" style="width: 80rpx;"></image>
									</view>
								</view> 
								 
							</template>
							
							<!-- 抽样 -->
							<template v-if="params.protype==6">
								<view class="item" v-for="(item,index) in list" :key="index"
								:data-pid="item.id" 
								:data-proType="item.project_type" 
								:data-unionPid="item.union_pid" @click="jump($event,item.sh_status)">
									<view class="pic">
										<image src="@/static/images/cy_icon.png" mode="widthFix"></image> 
									</view>
									<view class="info">
										<view class="name">{{item.pname}}</view>
										<view class="params">
											<view class="text">创建时间：{{item.begin_time}}</view>
										</view>
									</view>
									<view v-if="item.finish==1" class="status">
										<image src="@/static/images/gq_icon.png" mode="widthFix"></image>
									</view>
									<view v-if="item.sh_status==0" class="sh-status">
										<image :src="web_host+'/wxicon/review.png'" mode="widthFix" style="width: 80rpx;"></image>
									</view>
								</view> 	 	 
							</template>
							
							
							<loading :loadingState="loadingState"></loading> 
						</template>
						<template v-else>
							<empty msg="暂无信息"></empty>
						</template>

					</template>


				</view>
			</view>
			<view v-if="params.protype==2" class="footer">
				<view class="fix-wrap nav">
					<navigator open-type="navigate" url="/package_project/projectList/projectList" hover-class="none" class="item active flex-grow-1">
						<view class="icon">
							<view class="iconfont f-s44">&#xe63d;</view>
						</view>
						<view class="name">项目列表</view>
					</navigator>
					<navigator open-type="navigate" :url="'/package_project/jc_pro/personalWork/personalWork?datatype='" hover-class="none" class="item flex-grow-1">
						<view class="icon">
							<view class="iconfont f-s40">&#xe63c;</view>
						</view>
						<view class="name">个人作业</view>
					</navigator>
					<navigator open-type="navigate" :url="'/package_project/jc_pro/groupWorkList/groupWorkList'" hover-class="none" class="item flex-grow-1">
						<view class="icon">
							<view class="iconfont f-s48">&#xe748;</view>
						</view>
						<view class="name">群作业</view>
					</navigator>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import loading from '@/components/loading-more.vue'
	import empty from '@/components/empty.vue'
	export default {
		name: 'demo',
		data() {
			return {
				isLogin:false,
				loadingState: {
					default: true,
					loading: false,
					completed: false
				},
				type: 1,
				list: [], 
				total:0,
				web_host:getApp().globalData.web_host,
				params:{
					page:1,
					finish:'0',    // 默认未完成
					protype:'2',   // 默认监测项目
					type_code:'pc_pro',
					keyword:'',
					datatype:'',
				},
				filter_data:{
					all_active:0,
					pro_active:2,
					sta_active:0,
					isShowFilter:false,
					isShowProjectType:false,
					isShowProjectStatus:false,
					select_type_name:'监测普查',
					select_status_name:'未完成',
					type:[
						{
							name:'监测普查',
							check:true,
							type_code:'pc_pro',
							protype:2
						},
						{
							name:'疫情防控',
							check:false,
							type_code:'fk_pro',
							protype:1
						},
						{
							name:'监督监理',
							check:false,
							type_code:'jl_pro',
							protype:3
						},
						{
							name:'抽样调查',
							check:false,
							type_code:'cy_pro',
							protype:6
						}
					],
					status:[
						{
							name:'未完成',
							check:true,
							finish:0
						},
						{
							name:'已完成',
							check:false,
							finish:1
						}
					]
				}
			}
		},
		onShow() {

		},
		async onLoad() {
			this.isLogin = await this.$loginState('check');
			if(this.isLogin){
				this.getList(); 
			}
		},
		onReachBottom(){
			if(this.loadingState.completed){ 
				this.params.page=1;
				return false
			}else{
				if(this.list.length<this.total&&this.list.length>0){
					this.params.page++;
					this.getList(); 
				} 
			}	 
		},
		methods: {
			
			// 
			dataInit:function(){
				this.params.page=1;
				this.list=[]; 
				this.loadingState.default=true;
				this.loadingState.loading=false;
				this.loadingState.completed=false; 
			},
			
			// 获取列表
			getList:async function(){
				let res=await this.$api.pro_api.projects({
					page: this.params.page,
					finish: this.params.finish,
					protype: this.params.protype,
					type_code: this.params.type_code, 
					keyword:this.params.keyword,
					is_app:1
				})    
				if(res.data.ret==0){
					this.loadingState.default=false;
					this.loadingState.loading=true;
					this.total=res.data.data.count;
					this.list=this.list.concat(res.data.data.projects);
					if(this.list.length>=this.total){
						this.loadingState.default=false;
						this.loadingState.loading=false;
						this.loadingState.completed=true;
					}
				}else{
					this.loadingState.default=false;
				} 
			},
			
			// 搜索
			search:function(){
				this.dataInit();
				this.getList();
			},
			
			// 清空搜索词
			clearKeyword:function(){
				this.params.keyword='';
				this.dataInit();
				this.getList();
			},
			
			// 打开过滤
			showFilter:function(type){
				// type 筛选条件  1 类型  2 状态		 		
				
				if(type==1){
					this.filter_data.isShowFilter=true;
					this.filter_data.isShowProjectType=true;
					this.filter_data.isShowProjectStatus=false;
					this.filter_data.pro_active=type;
					this.filter_data.all_active=null;
					this.params.datatype='pc';
				}else if(type==2){
					this.filter_data.isShowFilter=true;
					this.filter_data.isShowProjectType=false;
					this.filter_data.isShowProjectStatus=true;
					this.filter_data.sta_active=type;
					this.filter_data.all_active=null;
					this.params.datatype='pc';
				}else if(type==0){
					this.filter_data.isShowFilter=false;
					this.filter_data.isShowProjectType=false;
					this.filter_data.all_active=type;
					this.filter_data.sta_active='';
					this.filter_data.pro_active='';
					this.params.type_code='getall';
					this.params.protype='';
					this.params.finish='';
					this.params.datatype='jl';
					this.filter_data.select_status_name='';
					this.filter_data.select_type_name='';
					this.filter_data.type.forEach(item=>{
						item.check=false; 
					})
					this.filter_data.status.forEach(item=>{
						item.check=false; 
					})					
					this.dataInit();
					this.getList();
				}	 
			},
			
			// 关闭过滤
			hideFilter:function(){
				this.filter_data.isShowFilter=false;
				this.filter_data.isShowProjectStatus=false;
				this.filter_data.isShowProjectType=false;
			},
			
			// 类型过滤
			filterDataByType:function(protype){
				this.dataInit();
				this.filter_data.type.forEach(item=>{
					item.check=false;
					if(item.protype==protype){
						this.filter_data.select_type_name=item.name;
						this.params.protype=item.protype;
						this.params.type_code=item.type_code;
						item.check=true;
						this.getList();
					}
				})
			},
			
			// 状态过滤
			filterDataByStatus:function(finish){
				this.dataInit();
				this.filter_data.status.forEach(item=>{
					item.check=false;
					if(item.finish==finish){
						this.filter_data.select_status_name=item.name;
						this.params.finish=item.finish; 
						item.check=true;
						this.getList();
					}
				})
			},
			
			// 调整详情
			jump(e,status){ 
				let pid=e.currentTarget.dataset.pid;
				let pro_type=e.currentTarget.dataset.protype;
				let union_pid=e.currentTarget.dataset.unionPid; 
				if(status==0){
					uni.showModal({
						content:"此项目正在审核中，如有疑问请联系：13560111110",
						success(res) {
							if(res.confirm){
								uni.makePhoneCall({
									phoneNumber: '13560111110'
								});
							}
						}
					})
				}else{
					if(pro_type==1){
						uni.navigateTo({
							url:`/package_project/fk_pro/projectDetail/projectDetail?pid=${pid}&pro_type=${pro_type}&union_pid=${union_pid}`
						})
					}else if(pro_type==2){
						uni.navigateTo({
							url:`/package_project/jc_pro/projectDetail/projectDetail?pid=${pid}&pro_type=${pro_type}&union_pid=${union_pid}`
						})
					}else if(pro_type==3){
						uni.navigateTo({
							url:`/package_project/jl_pro/projectDetail/projectDetail?pid=${pid}&pro_type=${pro_type}&union_pid=${union_pid}`
						})
					}else if(pro_type==6){
						uni.navigateTo({
							url:`/package_project/cy_pro/projectDetail/projectDetail?pid=${pid}&pro_type=${pro_type}&union_pid=${union_pid}`
						})
					}
					
					
				}
			}
 
			
		},
		computed: {

		},
		components: {
			loading,
			empty
		}
	}
</script>

<style scoped lang="less">
	.filter-select-page {
		top: 90px
	}

	.list-wrap {
		padding-top: 20rpx;
		.item {
			position: relative;
			display: flex;
			padding: 30rpx 20rpx;
			margin-bottom: 20rpx;
			background: #fff; 
			.pic {
				width: 110rpx;
				margin-right: 20rpx;
				flex-shrink: 0;

				image {
					width: 100%;
				}
			}

			.info {
				flex-grow: 2;

				.name {
					margin-bottom: 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}

				.params {
					margin-bottom: 10rpx;
					padding-left: 10rpx;
					font-size: 30rpx;
					color: #999;

					.text {
						margin-bottom: 8rpx;
					}
				}
			}

			.status {
				position: absolute;
				right: 10rpx;
				top: 20rpx;
				width: 140rpx;
				color: #fff;
				text-align: center;
				font-size: 30rpx;

				image {
					width: 100%;
				}
			}
			.sh-status{
				position: absolute;
				right: 0;
				top: 0;
			}

		}
	}

	.add-yj-btn {
		width: 96%;
		height: 80rpx;
		margin: 10rpx auto;
		background: #f00;
		border-radius: 10rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-size: 32rpx;
	}
</style>
